<template>
    <div class="contentmain backgroundColor Position">
        <el-row>
            <el-col :span="24">
                <span class="blueColor titleFont">欢迎使用斤果后台</span>
                <el-button size="small" class="helpBtn" @click="Help=!Help">
                    帮助<i :class="Help?'el-icon-arrow-up el-icon--right':'el-icon-arrow-down el-icon--right'"></i>
                </el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20">
                <el-row v-if="Help" class="MarginTop">
                    <el-col :span="8" class="writeColor helpHeight">
                        <ul class="directory">
                            <li v-for="(item,index) in directory" :key="item.text" @click="getText(index)" :class="item.checked?'directoryIsActive':null">{{item.text}}</li>
                        </ul>
                    </el-col>
                    <el-col :span="16" class="writeColor helpHeight">
                        <div class="textrul" v-if="text1">欢迎使用斤果平台！<br>我们为您准备了全新的新零售解决方案，快来探索您的新店之旅吧。<br>
                        首先需在 <span class="blueColor">【商品类型管理】</span>中<span class="blueColor">【添加商品分类】</span>，再前往<span class="blueColor">【商品发布】</span>填写商品详情。<br>
                        总账号拥有最高操作权限，可通过<span class="blueColor">【配置库存】</span>操作子账号店铺价格和规格</div>
                        <!-- 商品管理 -->

                        <div class="textrul" v-if="text2">帮助门店解决账目混乱，库存不准，信息反馈不及时等问题。<br>
                        集<span class="blueColor">【订货】</span>
                        <span class="blueColor">【入库】</span>
                        <span class="blueColor">【调货】</span>
                        <span class="blueColor">【报损】</span>
                        <span class="blueColor">【盘点】</span>
                        <span class="blueColor">【销售】</span>为一体，<br>同时支持实时数据查询，批量导入导出表格等功能</div>
                        <!-- 进销存 -->

                        <div class="textrul" v-if="text3"><span class="blueColor">微信商城</span>和<span class="blueColor">小程序</span>是您的线上渠道，专门设计三大板块<span class="blueColor">【轮播广告】</span>、
                        <span class="blueColor">楼层设置</span>、<span class="blueColor">专题</span><br>能帮助您更好的展示商品，吸引客户。<br>
                        现在请根据您的实际情况，及时更换版块内容</div>
                        <!-- 界面配置 -->

                        <div class="textrul" v-if="text4">展示了所有<span class="blueColor">【订单详情】</span>，提供信息查询功能，可以对订单进行
                        <span class="blueColor">【一键发货】</span>、<span class="blueColor">【退款】</span>等操作。</div>
                        <!-- 订单管理 -->

                        <div class="textrul" v-if="text5">展示了所有<span class="blueColor">【店铺详细信息】</span>，包括店铺地址和店长信息，您可以更具实际情况增加店铺。</div>
                        <!-- 门店管理 -->

                        <div class="textrul" v-if="text6">可以查询当下所有<span class="blueColor">【用户信息】</span>和交易记录，并对指定客户进行发放优惠券等操作。</div>
                        <!-- 客户查询 -->

                        <div class="textrul" v-if="text7">丰富的促销活动，有利于吸引顾客，促进订单成交。<br>
                        包含<span class="blueColor">【优惠券】</span>、<span class="blueColor">【限时抢购】</span>、<span class="blueColor">【分享活动】</span>、<span class="blueColor">【限时抢劵】</span>、
                        <span class="blueColor">【充值】</span>等日常促销手段。</div>
                        <!-- 营销 -->

                        <div class="textrul" v-if="text8">提供数据分析功能，精确展现经营状况。<br>
                        <span class="blueColor">【门店分析】</span>包含<span class="blueColor">【微信商城】</span>、<span class="blueColor">【小程序】</span>、<span class="blueColor">【线下】</span>
                        平台数据，可进行分类查询及汇总。</div>
                        <!-- 经营分析 -->
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6" class="pdn2"><div class="writeColor"><span class="span1">待发货订单</span><router-link :to="{ path: '/OrderList', params: { activeName: 3 }}" style="width: 10%;" class="span1 grayfont floatRight">查看</router-link><hr color="#f2f2f2"><span class="blockHeight MarginTop textAlign span2 blueColor">{{listData.listDFHMap}}</span></div></el-col>
                    <el-col :span="6" class="pdn2"><div class="writeColor"><span class="span1">待退款订单</span><router-link :to="{ path: '/OrderList', params: { activeName: 9 }}" style="width: 10%;" class="span1 grayfont floatRight">查看</router-link><hr color="#f2f2f2"><span class="blockHeight MarginTop textAlign span2 blueColor">{{listData.listDTKMap}}</span></div></el-col>
                    <el-col :span="6" class="pdn2"><div class="writeColor"><span class="span1">昨日销售额</span><router-link to="/Home" style="width: 10%;" class="span1 grayfont floatRight">查看</router-link><hr color="#f2f2f2"><span class="blockHeight MarginTop textAlign span2 blueColor">￥{{listData.XSEMap}}</span></div></el-col>
                    <el-col :span="6" class="pdn2"><div class="writeColor"><span class="span1">昨日毛利</span><router-link to="/Home" style="width: 10%;" class="span1 grayfont floatRight">查看</router-link><hr color="#f2f2f2"><span class="blockHeight MarginTop textAlign span2 blueColor">￥{{listData.ml}}</span></div></el-col>
                </el-row>
                <!-- 营销板块 -->
                <el-row>
                    <el-row>
                        营销板块
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" class="textAlign"><div class="blockHeight MarginTop writeFont Color1"><h3>拼团</h3><p>裂变营销 快速拉新</p></div></el-col>
                        <el-col :span="8" class="textAlign"><router-link to="/CouTime" class="blockHeight MarginTop writeFont Color2"><h3>限时抢购</h3><p>便于引流 增加关注</p></router-link></el-col>
                        <el-col :span="8" class="textAlign"><router-link to="/CouShare" class="blockHeight MarginTop writeFont Color3"><h3>分享活动</h3><p>以老带新 自发传播</p></router-link></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" class="textAlign"><router-link to="/CouList" class="blockHeight MarginTop writeFont Color4"><h3>优惠券管理</h3><p>促进活跃 刺激消费</p></router-link></el-col>
                        <el-col :span="8" class="textAlign"><router-link to="/PayConfig" class="blockHeight MarginTop writeFont Color5"><h3>账户充值</h3><p>客户留存 提高复购</p></router-link></el-col>
                        <el-col :span="8" class="textAlign"><router-link to="/CouLimit" class="blockHeight MarginTop writeFont Color6"><h3>限时抢劵</h3><p>增加趣味 调动积极性</p></router-link></el-col>
                    </el-row>
                </el-row>
            </el-col>
            <el-col :span="4">
                <el-row class="textAlign pdn">
                    <div class="blockHeight MarginTop writeColor">
                        <p>客服</p>
                        <p>02566048533</p>
                    </div>
                </el-row>
                <el-row>
                    <div class="none writeColor"></div>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            Help:false,
            directory:[{text:'1、商品管理',checked:true},
                        {text:'2、进销存',checked:false},
                        {text:'3、界面配置',checked:false},
                        {text:'4、订单管理',checked:false},
                        {text:'5、门店管理',checked:false},
                        {text:'6、客户查询',checked:false},
                        {text:'7、营销',checked:false},
                        {text:'8、经营分析',checked:false}],
            text1:true,
            text2:false,
            text3:false,
            text4:false,
            text5:false,
            text6:false,
            text7:false,
            text8:false,
            listData:{
                listDFHMap:0,
                listDTKMap:0,
                XSEMap:0,
                ml:0
            }
        }
    },
    created(){
        var _this=this
        var pp=new URLSearchParams()
        if(this.$store.state.shiro){
            pp.append('shopId',0)
        }else{
            pp.append('shopId',this.$store.state.TOPshopID)
        }
        axios.get('/getOrderStatus.do',{params:pp}).then(r=>{
            if(r.data.code==200){
                _this.listData.listDFHMap = r.data.response.listHashMap.listDFHMap
                _this.listData.listDTKMap = r.data.response.listHashMap.listDTKMap
                _this.listData.XSEMap = r.data.response.listHashMap.XSEMap
                _this.listData.ml = r.data.response.listHashMap.DateAnalysisVoMap.dateAnalysisVO1.ml
            }else{
                if(r.data.message=="not login"&&r.data.code==500){
                    _this.$message.error("访问者,请登录")
                    router.push('/Login');
                }else{
                    _this.$message.error(r.data.message)
                }
            }
        })
    },
    methods:{
        getText(v){
            for(var i=0;i<this.directory.length;i++){
                this.directory[i].checked=false
            }
            this.directory[v].checked=true

            this.text1=false
            this.text2=false
            this.text3=false
            this.text4=false
            this.text5=false
            this.text6=false
            this.text7=false
            this.text8=false
            switch (v) {
                case 0:
                    this.text1=true
                    break;
                case 1:
                    this.text2=true
                    break;
                case 2:
                    this.text3=true
                    break;
                case 3:
                    this.text4=true
                    break;
                case 4:
                    this.text5=true
                    break;
                case 5:
                    this.text6=true
                    break;
                case 6:
                    this.text7=true
                    break;
                case 7:
                    this.text8=true
                    break;
            }
        }
    },
    beforeCreate(){
        if(this.$store.state.shiro){
            if(this.$store.state.shiroitem.caiwu){
                router.push('/OrderList')
            }
        }
    }
}
</script>
<style scoped>
a{
    width: 100%;
    display: inline-block;
    text-decoration: none;
}
.backgroundColor{
    background-color: #F2F2F2;
}
.Position{
    position: fixed;
    top: 60px;
    bottom: 30px;
    right: 0px;
    left: 225px;
}
.helpBtn{
    float: right;
    margin-right: 17%;
    background-color: #ccc;
    color: #000;
}
.writeColor{
    background-color: #fff;
}
.writeFont{
    color: #fff;
}
.blueColor{
    color: #56A3FA;
}
.titleFont{
    font-size: 20px;
}
.textAlign{
    text-align: center;
}
.blockHeight{
    height: 110px;
    padding: 1px;
}
.MarginTop{
    margin-top: 10px;
}
.Color1{
    background-color: #8993F5;
}
.Color2{
    background-color: #BC8CEF;
}
.Color3{
    background-color: #FFA895;
}
.Color4{
    background-color: #5AE0DF;
}
.Color5{
    background-color: #F1CC3F;
}
.Color6{
    background-color: #49C3F4;
}
.pdn{
    padding: 0 20px 20px 20px;;
}
.pdn2{
    padding: 20px 20px 20px 0;
}
.grayfont{
    color: #A5A5A5;
}
.floatRight{
    float: right;
}
.span1{
    font-weight: bold;
    display: inline-block;
    padding: 10px;
}
.span2{
    display: block;
    text-align: center;
    width: 100%;
    font-size: 50px;
}
.helpHeight{
    height: 250px;
}
.directory{
    list-style-type: none;
    line-height: 27px;
    padding-left: 15px;
}
.directory li{
    width: 70%;
    padding-left: 30px;
    border-radius: 13px;
    cursor: pointer;
}
.directory li:hover{
    background-color: #F1F8FE;
}
.directoryIsActive{
    background-color: #d4ebff;
}
.textrul{
    margin: 20px;
    line-height: 30px;
    overflow: auto;
}
.none{
    height: 500px;
    margin: 20px;
}
</style>
